<script>
import apiFlowing from "@/pages/v1/flow/Flowing/js/apiFlowing";
import TitleA from "@/comps/comm/TitleA.vue";
import EzData from "@/comps/EzData.vue";
import formBuilder from "@/comps/form/formBuilder";
import apiFlow from "@/pages/v1/flow/Flow/js/apiFlow";
import apis from "@/pages/v1/erp/Need/js/api";

export default {
  name:"EzApproval",
  components: {EzData, TitleA},
  props:{
    targetId:{
      type:Number,
      default:0
    },
    targetType:{
      type:String,
      default:""
    },
    ownerId:{
      type:Number,
      default:0
    },

  },
  data() {
    let startModelConfig = formBuilder()
    startModelConfig.setLabelPosition("top").setLabelWidth(100)
    startModelConfig.addText("title","流程标题",3)
        .setRules([startModelConfig.R.notNull("流程标题不能为空")])
    startModelConfig.addSearch("flowId", "选择流程", 3).setApi(apiFlow.urlChoice)
        .setRules([startModelConfig.R.notNull("请选择流程")])
    return{
      curTab:"info",
      history:[],
      curFlow:null,
      updateKey:"",

      auth:false,

      //start
      isNew:false,
      startModel:{
        flowId:0,
      },
      startModelConfig,
      mustSelectFLowTo:"请选择下一审批环节"
    }
  },
  mounted() {
    this.getFlowing()
  },
  methods:{
    getFlowing(){
      apiFlowing.findBy({
        _where:{
          targetId: this.targetId
        },
        _order:["-id"],
        _dumps:["flow"]

      },res=>{
        //如果没有获取到相关的审批内容，就跳转到发起
        if (res.length === 0){
          this.isNew = true
          this.curTab = "start"
        }else {
          this.history = res
          this.curFlow = res[0]
          this.curTab = "history"

          this.getAuth()
        }
      })
    },
    start(){

      this.$refs.startForm.valid().then(res => {
        if (res) {
          this.$http.post("/flow/admin/Flowing/start", {
            id: this.targetId,
            type: this.targetType,
            ownerId: this.ownerId,
            flowId: this.startModel.flowId,
          }, res => {
            this.$toast.success("提交成功")
            this.getFlowing()
          })
        }else {
          this.$toast.error("请检查表单数据是否填写正确！")
        }
      })
    },
    reset() {
      this.$http.post("/flow/admin/Flowing/reset", {
        id: this.curFlow.id,
      }, res => {
        this.getFlowing()
      })
    },
    submit() {
      if (this.curFlow.flowCur.flowTo === "" && ( this.curFlow.flowCur.finalState !== "取消" || this.curFlow.flowCur.finalState !== "完成" )){
        this.mustSelectFLowTo = "请选择下一审批环节"
        return
      }
      if (this.curFlow.flowCur.finalState === ""){
        this.curFlow.flowCur.finalState = "通过"
      }
      this.$http.post("/flow/admin/Flowing/submit", {
        id: this.curFlow.id,
        flowCur: this.curFlow.flowCur,
      }, res => {
        this.getFlowing()
      })
    },
    cancel(){
      this.curFlow.flowCur.finalState = "取消"
      this.curFlow.flowCur.flowTo = this.curFlow.flowCur.key
      this.submit()
    },
    finish(){
      this.curFlow.flowCur.finalState = "完成"
      this.curFlow.flowCur.flowTo = this.curFlow.flowCur.key
      this.submit()

    },
    selectFlowTo(v){
      if (v !== ""){
        this.mustSelectFLowTo = ""
      }
    },
    getAuth() {
      this.$http.post("/flow/admin/Flowing/auth", {
        id: this.curFlow.id,
      }, res => {
        this.auth = res.data
        this.updateKey = Math.random()
      })
    }
  }
}
</script>

<template>
  <div class="pad5">
    <div>
      <div>
        <div class="flrc bcf pad5 round3">
          <title-a class="flex1">审批流程</title-a>
          <mu-button color="primary" icon @click="goback(-1)">
            <mu-icon value="exit_to_app"></mu-icon>
          </mu-button>
        </div>

        <div class="mdui-color-red-100  tac pad5 mart5" v-if="auth && auth.isSuperAdmin">
          <span class="mdui-text-color-red-900">请注意！正在使用【超级管理员】权限进行操作！</span>
        </div>

        <div class="pad5 bcf mart5 round3" v-if="curFlow">
          <title-a class="fs8 op8">
            <div class="flrc">
              <span>审批主题：</span><span class="flex1">{{ curFlow.title }}</span>
              <span>当前环节：</span><span class="flex1">{{ curFlow.flowCur.name }}</span>
              <span>审批状态：</span><span class="flex1">{{ curFlow.state }}</span>
            </div>
          </title-a>


          <div class="mdui-color-green-100  tac pad20 mar10" v-if="curFlow && curFlow.isConfirm">
            <span class="mdui-text-color-green-900">审批流程已完成</span>
          </div>

          <div class="mdui-color-grey-300  tac pad20 mar10" v-else-if="curFlow && curFlow.isCancel">
            <span class="mdui-text-color-grey-600">审批流程已取消</span>
          </div>

          <div class="pad5 round3 mart5" v-else-if="curFlow.flowCur && auth &&( auth.userAccess || auth.departmentAccess  || auth.isSuperAdmin )">
            <div class="mart5">
              <div v-for="row in curFlow.flowCur.form" :key="row.key">
                <mu-text-field v-model="row.value" :label="row.name" full-width></mu-text-field>
              </div>
            </div>
            <div class="flrc">
              <div class="padlr5">
                <mu-select v-model="curFlow.flowCur.finalState" style="width: 100px;" label="审批结果" label-float>
                  <mu-option value="通过" label="通过"></mu-option>
                  <mu-option value="驳回" label="驳回"></mu-option>
                  <mu-option value="取消" label="取消"></mu-option>
                  <mu-option value="完成" label="完成"></mu-option>
                </mu-select>
              </div>
              <div class="padlr5">
                <mu-select @change="selectFlowTo" :error-text="mustSelectFLowTo" v-model="curFlow.flowCur.flowTo" style="width: 200px;" label="流转至" label-float>
                  <mu-option :value="item.key" :label="item.name" v-for="(item) in curFlow.flow.points"
                             :key="item.key"></mu-option>
                </mu-select>
              </div>
              <div class="">
                <mu-button color="primary" round @click="submit">提交</mu-button>
                <mu-button class="marl10"  round color="secondary" @click="cancel" v-if="curFlow.flowCur.canCancel">取消审批</mu-button>
                <mu-button class="marl10" round color="success" @click="finish" v-if="curFlow.flowCur.canFinish">完成</mu-button>
              </div>
              <div class="flex1 flex-r flex-start padl10">
                <div class="c12 flex-r flex-wrap flex-start" v-if="curFlow.flowCur">
                  <div class="pad3 round3  mdui-color-green-50 marr5 mdui-text-color-green-800" v-for="item in curFlow.flowCur.next">{{item.condition}} > {{item.name}}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="mdui-color-orange-50 flrc mart10" v-else>
            <mu-icon color="warning" size="32" value="error_outline" class="mar20"></mu-icon>
            <span class="flex1 pad20 c12">尚未流转到当前审批环节</span>
          </div>

        </div>
      </div>

    </div>



    <div class="bcf round3 mart5">

      <mu-tabs inverse :value.sync="curTab">
        <mu-tab value="info">审批主题</mu-tab>
        <mu-tab value="history" v-if="curFlow">审批意见</mu-tab>
        <mu-tab value="view" v-if="curFlow">流程概览</mu-tab>
        <mu-tab value="start" v-if="isNew || (auth && (auth.editAccess || auth.isSuperAdmin))">发起/修改</mu-tab>
        <mu-tab value="reset" v-if="auth && (auth.editAccess || auth.isSuperAdmin)">解锁</mu-tab>
      </mu-tabs>
      <div class="bcf round3 pad5"  v-show="curTab === 'reset'">
        <title-a class="fs8">数据解锁</title-a>
        <div class="pad20">
          <div class="tac"><mu-button color="error" @click="reset">解锁重置流程</mu-button></div>
        </div>
      </div>
      <div class="bcf round3 pad5"  v-show="curTab === 'start'">
        <title-a class="fs8">发起审批流程</title-a>
        <div>
          <EzData ref="startForm" :config="startModelConfig" v-model="startModel" ></EzData>
          <div class="tac"><mu-button color="primary" @click="start">保存</mu-button></div>
          <div class="mart10 pad10 tac mdui-color-red-50 tac"><span class="mdui-text-color-red-900">注意,已经发起的流程，再次提交后会被重置</span></div>
        </div>
      </div>

      <div class="bcf pad5 round3"  v-show="curTab === 'view'">
        <title-a class="fs8">流程预览</title-a>
        <div class="mart10">
          <mu-stepper v-if="curFlow && curFlow.flow.points" orientation="vertical" >
            <mu-step v-for="(item,index) in curFlow.flow.points" :key="index" :active="true">
              <mu-step-button>{{ item.name }}</mu-step-button>
              <mu-step-content>
                <div class="flex-r mart10">
                  <div class="flex1" v-if="item.auth.user.length > 0">
                    <title-a>人员</title-a>
                    <div class="mart5">
                      <span v-for="(u,uIndex) in item.auth.user">{{ u.name }}</span>
                    </div>
                  </div>
                  <div class="flex1" v-if="item.auth.department.length > 0">
                    <title-a>部门</title-a>
                    <div class="mart5">
                      <span v-for="(d,dIndex) in item.auth.department">{{ d.name }}</span>
                    </div>
                  </div>
                </div>
              </mu-step-content>
            </mu-step>
          </mu-stepper>
        </div>
      </div>
      <div class="bcf round3 padt5" v-if="curTab === 'info'">
        <slot></slot>
      </div>
      <div class="bcf round3 padt5" v-show="curTab === 'history'">
        <div class="pad5">
          <title-a class="fs8">审批历史记录</title-a>
          <div class="mdui-color-orange-50 pad10 mar10 tac" v-if="curFlow && !curFlow.flows">
            暂无审批记录
          </div>
          <mu-stepper v-if="curFlow && curFlow.flows" orientation="vertical" class="mart10">
            <mu-step v-for="(item,index) in curFlow.flows" :key="index" :active="true" :completed="true" :disabled="true">
              <mu-step-label>
                <div class="flrc bc13 padtb5 round30 padr10 padl10 mart10 w100">
                  <div class="pad c11 fwb">{{ item.name }}</div>
                  <div class="flex1 tar padr5 c12 fs8">{{$utils.str2time(item.fillAt)}}</div>
                  <div class="mdui-color-green-600 padtb1 padlr9 round30" v-if="item.finalState==='通过'">
                    {{item.finalState}}
                  </div>
                  <div class="mdui-color-purple padtb1 padlr9 round30" v-else-if="item.finalState==='驳回'">
                    {{item.finalState}}
                  </div>
                  <div class="mdui-color-pink-600 padtb1 padlr9 round30" v-else-if="item.finalState==='完成'">
                    {{item.finalState}}
                  </div>
                  <div class="mdui-color-orange-100 padtb1 padlr9 round30" v-else>
                    {{item.finalState}}
                  </div>
                </div>
              </mu-step-label>
              <mu-step-content>
                <div class="flex-r mart10">
                  <div v-for="row in item.form" class="flrc">
                    <div style="width: 120px;" class="tar c12">{{row.name}}：</div>
                    <div class="flex1 padl5">{{row.value}}</div>
                  </div>
                </div>
              </mu-step-content>
            </mu-step>
          </mu-stepper>
        </div>
      </div>


    </div>


  </div>
</template>

<style scoped>

</style>